import {View, Text, ScrollView} from "@tarojs/components";
import {Cell, Empty} from "@antmjs/vantui";
import AssetImage from "@/common/AssetImage";
import React, {useCallback, useEffect, useState} from "react";
import {RechargeModel, UserinfoModel} from "@/common/apis/model";
import {assetListApi, getUserInfoApi} from "@/common/apis/home_datasource";
import Utils from "@/utils/common";
import RouthPath from "@/common/RouthPath";
import ShowUtils from "@/utils/show_utils";
import {usePullDownRefresh} from "@tarojs/taro";
import EventUtils from "@/utils/event_utils";

definePageConfig({
  navigationBarTitleText: '资产管理',
  enablePullDownRefresh: true,
})
export default function AssetsManager() {
  const [items, setItems] = useState<RechargeModel[]>()

  const [balance, setBalance] = useState<UserinfoModel>()

  const getData = useCallback((isRefresh: boolean) => {
    getUserInfoApi(isRefresh).then((res) => {
      if (res) {
        setBalance(res)
      }
    })
    assetListApi().then((res) => {
      setItems(res)
    })
  }, []);

  useEffect(() => {
    getData(false)
    return () => {
    }
  }, [getData]);

  const getBalance = useCallback((type) => {
    if (balance) {
      if (type === 0) {
        return balance.balance
      } else if (type === 1) {
        return balance.debtLimitUse
      } else if (type === 2) {
        return balance.debtLimit
      } else {
        return '0'
      }
    }
  }, [balance]);


  usePullDownRefresh(() => {
    getData(true)
  })
  return (
    <View style={{backgroundColor: AssetImage.bg, display: 'flex', flexDirection: 'column', height: '100VH'}}>
      <View style={{
        display: 'flex',
        flexDirection: 'column',
        backgroundColor: AssetImage.themeColor,
        borderRadius: 15,
        color: 'white',
        margin: '10px',
      }}
      >
        <View style={{
          padding: '15px', display: 'flex',
          flexDirection: 'column',
        }}
        >
          <Text>预存总余额</Text>
          <View style={{display: 'flex', justifyContent: 'space-between', flexDirection: 'row', marginTop: '20px'}}>
            <View style={{display: 'flex', flexDirection: 'column'}}>
              <Text style={{fontSize: '20px'}}>{ShowUtils.getDefaultPrice(getBalance(0))}</Text>
              <Text>金额(元)</Text>
            </View>
            <View style={{display: 'flex', flexDirection: 'column'}}>
              <View>
                <Text
                  style={{fontSize: '20px', color: 'red'}}
                >{ShowUtils.getDefaultPrice(getBalance(1))}</Text>
                <Text
                  style={{fontSize: '20px'}}
                >{`/${ShowUtils.getDefaultPrice(getBalance(2))}`}</Text>
              </View>
              <Text>信用分</Text>
            </View>
          </View>
        </View>

        <View style={{
          backgroundColor: 'white',
          marginTop: '0px',
          color: AssetImage.themeColor,
          display: 'flex',
          flexDirection: 'row',
          justifyContent: 'space-around',
          padding: '10px',
          borderBottomRightRadius: 15,  // 上左角圆角半径
          borderBottomLeftRadius: 15,
        }}
        >
          <Text onClick={() => {
            Utils.navigateAndListenToEvent(Utils.getUrlWithObject(RouthPath.applyRecharge, {
              type: 1
            }), EventUtils.ApplyRecharge, (data) => {
              if (data) {
                getData(false);
                EventUtils.trigger(EventUtils.UserInfo, true)
              }
            })
          }}
          >预存充值</Text>
          <Text onClick={() => {
            Utils.navigateTo({url: RouthPath.applyRecord})
          }}
          >预存记录</Text>
        </View>
      </View>

      <View style={{
        overflow: 'hidden',
        position: 'relative',
        flex: 1,
        backgroundColor: 'white',
        borderRadius: 15,
        marginLeft: '10px',
        marginRight: '10px',
        marginBottom: '30px',
      }}
      >
        <Cell title='变动明细'></Cell>
        <ScrollView
          scrollY // Enable vertical scrolling
          style={{height: '100%', boxSizing: 'border-box',paddingBottom:'30px'}}
        >
          {items && !Utils.isEmpty(items) ? items.map((e, i) => {
            return <View key={e.id} style={{margin: '10px', height: '50px'}}>
              <Cell title={ShowUtils.getPayType(e.businessType)} label={e.createTime}>
                <Text style={{color: 'red'}}>{ShowUtils.getDefaultPrice(e.amount)}</Text>
              </Cell>
            </View>
          }) : <Empty description='暂无数据' />}
        </ScrollView>
      </View>

    </View>
  )
}


